<script setup>
/* 引入 */
import { ref, onMounted, inject, watch } from "vue";
import { ElMessageBox } from "element-plus";
import { useTownStore } from "@/stores";

/* 数据 */
const axios = inject("$axios");
const townStore = useTownStore();
const dialogTableVisible = ref(true); // 控制弹窗显示状态

/* 钩子 */
onMounted(() => {
  // 发送请求获取小镇列表
  axios
    .get("/towns/list")
    .then((res) => {
      townStore.setTowns(res.data); // 设置状态
    })
    .catch((err) => {
      console.error("获取小镇列表失败:", err);
    });
});

/* 回调 */
// 用户选择小镇时回调
const selectTown = (currentTown) => {
  townStore.setCurrentTown(currentTown); // 设置状态
  dialogTableVisible.value = false; // 关闭对话框
  // TODO: 可以做状态持久化(缓存), 因为状态只存活在整个 Vue 应用的生命周期, 当前情况下用户手动刷新一次页面就需要重新选择小镇(只要不刷新就不会)
};

// 用户拒绝弹窗时回调
const handleClose = (done) => {
  ElMessageBox.confirm(
    "如果不选择小镇, 则会缺失部分功能影响您的体验, 您确定要关闭么?",
    "关闭确认", // 设置弹窗标题
    {
      confirmButtonText: "是",
      cancelButtonText: "否",
      autofocus: false,
    },
  )
    .then(() => {
      // 如果按“是”
      done();
    })
    .catch(() => {
      // 如果按“否”
    });
};

/* 侦听 */
watch(
  // 指定侦听的目标
  () => townStore.currentTown,
  // 发生改变时回调
  (newTown) => {
    if (newTown && newTown.currentTown) {
      dialogTableVisible.value = true;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div class="page-dialog">
    <el-dialog
      v-model="dialogTableVisible"
      title="请选择要进入的特色小镇(必须)"
      width="80vw"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <!-- 遍历小镇数据并生成每个小镇的显示区域 -->
        <el-col :span="8" v-for="town in townStore.towns">
          <div class="grid-content">
            <el-button
              class="full-width-button"
              type="success"
              block
              @click="selectTown(town)"
            >
              {{ town.townname }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 设置按钮列表布局样式 */
.grid-content {
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border-radius: 4px; /* 设置元素的圆角半径 */
  min-height: 36px; /* 设置元素的最小高度 */
}

/* 设置切换小镇按钮样式 */
.full-width-button {
  width: 100%; /* 将元素的宽度设置为其父容器宽度的 100% */
  text-align: center; /* 水平居中 */
  overflow: hidden; /* 超出部分隐藏 */
}
</style>
